<template>
    <div>
        <div style="height:1.8rem;"></div>
        <TabItems :itemgroup="menuarr" v-on:onTabChang='onChangeFn'></TabItems>
        <!-- 新闻列表 -->
        <div class="list-box" id="list">
            <div class="item border flex flex-align-center" @click="toDetailes(item.id)"
              v-for='(item,index) in list' :key="index">
                <img :src="item.path" alt="">
                <div class="text-box">
                    <div class="text-title">{{item.title}}</div>
                    <div class="text-cont">{{item.content}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
 import TabItems from '@/components/common/TabItems'
  import {format,strFormat} from '../public/utils'
export default {
    components:{
            TabItems
        },
    data () {
     return {
       menuarr:[
                    {name:'协会新闻',url:0},
                    {name:'通知公告',url:1},
                ],  
        limit: 1,
        offset:10,
        type:0,
        list:[],   
        stup:true, //控制是否可以分页请求    
        }
    },
    created () {
         this.$store.commit('setTitle',"协会动态");
         this.apiDynamic();
    },

    mounted(){
         this.scroll();
    },

    methods: {
        onChangeFn(e){
            this.$store.commit('setMenu',e);
            this.type = e;
            this.list = []; // 二级导航切换，将原有数据清空；
            this.apiDynamic();
        },

        async apiDynamic(){
            let _self = this;
            let {data} = await this.https.get(this.api.apiDynamic,
            {limit:this.limit,offset:this.offset,type:this.type});
            if(data){
                data.forEach(element => {
                    element.title = strFormat(element.title,20);
                    element.content = strFormat(element.content,30);
                    _self.list.push(element);
                });
                _self.stup = true;
            }else{
                _self.stup = false;
            }
        },

        toDetailes(id){
            this.$store.commit('setTitle',"协会动态");
            this.$router.push(`/info/${id}`);
        },

        // 下拉请求更多
        scroll(){
            let _self = this;
            let scrollDiv = document.getElementById('list');
            scrollDiv.addEventListener('scroll',function(){
                if(scrollDiv.scrollTop+scrollDiv.clientHeight == scrollDiv.scrollHeight && _self.stup){
                    _self.limit ++;
                    _self.apiDynamic();
                }
            })
        }
    }
    
}
</script>
<style lang="less" scoped>
@import url(../assets/css/dynamic/dynamic.less);
</style>

